<template>

  <!-- 搜索历史记录 -->
  <div class="historyBox"  v-if="historyList.length">
    <div class="title"> <span>历史记录</span>
      <van-icon name="delete-o" @click="clearHistory" />
    </div>
    <ul class="ulBox">
      <li v-for="item in historyList" @click="shoppingContent">
        <van-tag plain type="primary">{{ item }}</van-tag>
      </li>

    </ul>
  </div>

  <div class="title"> <span>热门搜索</span> <span @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}</span></div>
  <ul class="ulBox" v-if="isShow">
    <li v-for="item in hotlistArr" @click="shoppingContent">
      <van-tag plain type="primary">{{item.keyword}}</van-tag>
    </li>
    
  </ul>
  <div class="YC" v-else>已隐藏搜索发现</div>
</template>

<script lang="ts" setup>
import { ref ,onMounted} from 'vue'
import { useRouter, type Router } from 'vue-router';
import type {MyHotSearchitem} from '@/config/interface'
import {HotwordApi} from '@/api/goods'  

//准备一个数组保存历史记录  
const historyList: string[] =ref(JSON.parse(window.localStorage.getItem('history') as string) || []) 

//准备一个变量,控制显示隐藏
const isShow = ref<boolean>(true)
const $router: Router = useRouter()
//点击清除内容
const clearHistory = ()=>{
//删除浏览器中的内容
window.localStorage.removeItem('history')
  historyList.value = []
}

//点击商品内容时候促发的事件,跳转到商品详情页
const shoppingContent = (e: Event) => {
  // 这里断言一下e.target的类型
  const text = (e.target as HTMLElement).innerText
  // console.log(text);
  // 跳转到商品列表页
  $router.push({ path: '/goodslist', query: { search: text } })

}

//准备一个数组，用来存储热门搜素相关的内容
let hotlistArr =ref<MyHotSearchitem[]>([]) 
onMounted(async()=>{
  const res = await HotwordApi()
  hotlistArr.value = res.data
  // console.log(111 , res);
  
})


</script>


<style scoped lang="scss">
.title {
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
}

.ulBox {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;

  >li {
    margin-right: 8px;
  }
}

.YC {
  height: 100px;
  text-align: center;
  line-height: 100px;
}
</style>